<template>
  <div class="dashboard">
    <!-- <div class="fullscreen-button" @click="toggleFullscreen" style="display:none">toggle fullscreen</div> -->
    <div class="left">
      <div class="chartBox">
        <p class="chartTitle">社保卡成品卡数据</p>
        <!-- <div class="chartItem" id="bar1"></div> -->
        <div class="progressBox">

          <div class="progressItem">
            <div class="progressTitle">
              <span>已激活</span>
              <span>{{ cardFinished.actived>=10000?(cardFinished.actived/10000).toFixed(2): cardFinished.actived }}
            {{ cardFinished.actived>=10000 ? '万': '' }}张</span>
            </div>
            <div class="progress_txt">
              <div class="progress">
                <div
                  class="progress_in3"
                  :style="'width:'+getPercent(cardFinished.actived,cardFinished.count)+'%'" 
                />
              </div>
            </div>
          </div>
          
          <div class="progressItem">
            <div class="progressTitle">
              <span>已注销</span>
              <span>{{ cardFinished.cancel>=10000?(cardFinished.cancel/10000).toFixed(2): cardFinished.cancel }}
            {{ cardFinished.cancel>=10000 ? '万': '' }}张</span>
            
            </div>

            <div class="progress_txt">
              <div class="progress">
                <div
                  class="progress_in2"
                  :style="'width:'+getPercent(cardFinished.cancel,cardFinished.count)+'%'" 
                />
              </div>
            </div>

          </div>

          <div class="progressItem">
            <div class="progressTitle">
              <span>未激活</span>
              <span>{{ cardFinished.noActived>=10000?(cardFinished.noActived/10000).toFixed(2): cardFinished.noActived }}
            {{ cardFinished.noActived>=10000 ? '万': '' }}张</span>
             
            </div>
            <div class="progress_txt">
              <div class="progress">
                <div
                  class="progress_in1"
                  :style="'width:'+getPercent(cardFinished.noActived,cardFinished.count)+'%'"
                />
              </div>
            </div>
          </div>

          <!-- <div class="progressItem">
            <div class="progressTitle">
              <span>制卡失败</span>
              <span>{{ barNumber.error }} 张</span>
            </div>
            <div class="progress_txt">
              <div class="progress">
                <div
                  class="progress_in"
                  :style="'width:'+getPercent(barNumber.error,barNumber.count)+'%'"
                />
              </div>
            </div>
          </div> -->
        </div>

      </div>
      <div class="chartBox">
        <p class="chartTitle">社保卡制卡中数据</p>
        <!-- <div class="chartItem" id="pie2"></div> -->

        <div class="progressBox">
          <div class="progressItem">
            <div class="progressTitle">
              <span>异常数据</span>
              <span>{{ card.errPiece>=10000?(card.errPiece/10000).toFixed(2): card.errPiece }}
            {{ card.errPiece>=10000 ? '万': '' }}条</span>
            
            </div>
            <div class="progress_txt">
              <div class="progress">
                <div
                  class="progress_in4"
                  :style="'width:'+getPercent(card.errPiece,card.count)+'%'"
                />
              </div>
            </div>
          </div>

          <div class="progressItem">
            <div class="progressTitle">
              <span>未审核</span>
              <span>{{ card.notReviewed>=10000?(card.notReviewed/10000).toFixed(2): card.notReviewed }}
            {{ card.notReviewed>=10000 ? '万': '' }}条</span>
              
            </div>

            <div class="progress_txt">
              <div class="progress">
                <div
                  class="progress_in4"
                  :style="'width:'+getPercent(card.notReviewed,card.count)+'%'"
                />
              </div>
            </div>

          </div>

          <div class="progressItem">
            <div class="progressTitle">
              <span>待制卡</span>
              <span>{{ card.toBeMake>=10000?(card.toBeMake/10000).toFixed(2): card.toBeMake }}
            {{ card.toBeMake>=10000 ? '万': '' }}条</span>
              
            </div>
            <div class="progress_txt">
              <div class="progress">
                <div
                  class="progress_in4"
                  :style="'width:'+getPercent(card.toBeMake,card.count)+'%'"
                />
              </div>
            </div>
          </div>

          <div class="progressItem">
            <div class="progressTitle">
              <span>制卡中</span>
              <span>{{ card.making>=10000?(card.making/10000).toFixed(2): card.making }}
            {{ card.making>=10000 ? '万': '' }}条</span>
              
            </div>
            <div class="progress_txt">
              <div class="progress">
                <div
                  class="progress_in4"
                  :style="'width:'+getPercent(card.making,card.count)+'%'"
                />
              </div>
            </div>
          </div>
        </div>


      </div>
      
      <div class="chartBox">
        <p class="chartTitle">精准服务人员数据</p>
        <ul>
          <li>
            <div class="hd">已服务人数</div>
            <div class="content1">{{servie.total}}</div>
          </li>
          <li>
            <div class="hd">已转换人数</div>
            <div class="content2">{{servie.serviced}}</div>
            </li>
          <li>
            <div class="hd">未服务人数</div>
            <div class="content3">{{servie.noserviced}}</div>
          </li>


          <!-- 用来画下面的那条线 -->
          <!-- <div class="ul-footer"></div> -->
        </ul>
          <!-- 表格 -->
        <div class="chartItem1" id="bar">
          		<div class="chartTableBox" id="lbox">
							<table class="chartTable" cellpadding="0px" cellspacing="8px">
                    <!-- //datatable是一个list -->
                  <tr  v-for="(item,index) in tabledata" :key="index">   
                    <td>{{item.name}}</td>
                    <td>{{item.idcard}}</td>
                    <td v-bind:class="{warnColor:item.isService == '未服务',serverColor:item.isService == '已服务'}"><span >{{item.isService}}</span></td>
                </tr>
							</table>
						</div>
        </div>
      </div>
    </div>
  
    <div class="middle">

      <div class="top">
        <div class="box box1 bigbox">
            <p class="boxtt">总采集量</p>
            <p class="show">
              <span>{{ number.countCollect>10000?(number.countCollect/10000).toFixed(2): number.countCollect }}</span>
              {{ number.countCollect>10000 ? '万': '' }}张
            </p>
            <p class="hide">
              <span>{{ number.countCollect}}</span>张
            </p>
        </div>

        <div class="box box2 bigbox1">
          <p class="boxtt">总制卡</p>
          <p class="show1">
            <span>{{ number.countReceive>10000?(number.countReceive/10000).toFixed(2): number.countReceive }}</span>
            {{ number.countReceive>10000 ? '万': '' }}张
          </p>
          <p class="hide1">
            <span>{{ number.countReceive}}</span>张
          </p>
          <p class="boxtt_footer">
            占总采集量：{{number.makeCardPercent}}
          </p>
        </div>

        <div class="box box3 bigbox2">
          <p class="boxtt">总激活</p>
          <p class="show2">
            <span>{{ number.countActivate>10000?(number.countActivate/10000).toFixed(2): number.countActivate }}</span>
            {{ number.countActivate>10000 ? '万': '' }}张
          </p>
          <p class="hide2">
            <span>{{ number.countActivate}}</span>张
          </p>
          <p class="boxtt_footer">
            占总采集量：{{number.activedPercent}}
          </p>
        </div>
      </div>

      <div class="bottom">
         <div class="back" v-show="backflag" @click="goback">返回市级</div>
        <div class="chartItem map" id="map"></div>
      </div>
    </div>

    <div class="right">
      <div class="chartBox1">

        <p class="chartTitle">各银行发放制卡数据</p>
        <div class="header">
          <ul>
            <li v-for="(item,index) in bankList" :key="index" @click="getbank(index)"><i :class="{active:item.isActive}"></i>{{item.name}}</li>
          </ul>
        </div>
        <div class="chartItembank">
          <div class="getbank" id="getbank"></div>
          <div class="sentbank" id="sentbank"></div>
        </div>
        

      </div>

      <div class="chartBox1">
        <p class="chartTitle">社保卡持有率</p>
        <div class="chartItem" id="piee"></div>
      </div>

      <!-- <div class="chartBox">
        <p class="chartTitle">社保卡区县分布情况</p>
        <div class="chartItem" id="line2"></div>
      </div> -->
    </div>

  </div>
</template>

<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
require('echarts/lib/component/legend')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import 'echarts/map/js/province/xizang.js'
import 'echarts/map/js/province/chongqing.js'
import lasa from '../assets/js/540100.json'

// import guangzhou from '../assets/js/guangzhou.json'
// import 'echarts/map/js/china'
// require('../assets/js/china')

export default {
  components: {},
  data() {
    return {
      //社保卡制卡中数据
      cardTemp:{
        errPiece:0,
        notReviewed:0,
        toBeMake:0,
        making:0,
        count:0
      },
      //社保卡成品卡缓存数据
      cardFinishedTemp:{
        actived:0,
        cancel:0,
        noActived:0,
        count:0
      },
      //中间数据缓存变量
      midleData:{
        countCollect: 0, // 总采集
        countReceive: 0, // 总制卡
        countActivate: 0, // 总激活
        makeCardPercent:'0 %', //总制卡占比
        activedPercent:'0 %'   //总激活占比
      },
      //返回标志
      backflag:0,
      //当前选中银行的index
      currenIndex:0,
      //八大银行的数据
      bankList:[],
      bankColor:['rgba(253,237,1,1)','rgba(255,142,2,1)','rgba(151,232,51,1)','rgba(25,175,34,1)'],
      // scrollSpeedL:0,
      cardFinished:{     //社保卡成品卡数据
          actived:0,
          cancel:0,
          noActived:0,
          count:0
      },
      card:{        //社保卡制卡中数据
          errPiece:0,
          notReviewed:0,
          toBeMake:0,
          making:0,
          count:0

      },
      servie:{     //精准服务数据
        serviced:0,
        total:0,
        noserviced:0
        },
      tabledata:[],
      isFullScreen: false,
      color1: ['#F9BC00', '#2672E5'],
      color2: ['#2672E5', '#13D7AD'],
      number: {
        countCollect: 0, // 总采集
        countReceive: 0, // 总制卡
        countActivate: 0, // 总激活
        makeCardPercent:'0 %', //总制卡占比
        activedPercent:'0 %'   //总激活占比
      },
      
      mapData: []
    }
  },
  mounted() {
    
    this.reload()
    setInterval(this.scrollTable, 1000);
    setTimeout(() => {
      this.reload()
      setInterval(this.scrollTable, 1000);
    }, 60*1000*60);
    
  },
  methods: {
    //返回
    goback(){
      this.backflag = 0
      //刷新社保卡成品卡数据,社保卡制卡中数据,总采集量、总制卡、总激活
      //总采集量、总制卡、总激活
      // this.getData('/apps/lasakaguan/screen/getAllCounts','','midleData')
      this.number.countCollect = this.midleData.countCollect;
      this.number.countReceive = this.midleData.countReceive;
      this.number.countActivate = this.midleData.countActivate;
      this.number.makeCardPercent = this.midleData.makeCardPercent;
      this.number.activedPercent = this.midleData.activedPercent;
      //社保卡成品卡数据
      // this.getData('/apps/lasakaguan/screen/getOutCardData','','bar1')
      this.cardFinished={     //社保卡成品卡数据
          actived:this.cardFinishedTemp.actived,
          cancel:this.cardFinishedTemp.cancel,
          noActived:this.cardFinishedTemp.noActived,
          count:this.cardFinishedTemp.count
      }
      //社保卡制卡中数据
      // this.getData('/apps/lasakaguan/screen/getMakeCardData','','bar2')
      this.card={        //社保卡制卡中数据
          errPiece:this.cardTemp.errPiece,
          notReviewed:this.cardTemp.notReviewed,
          toBeMake:this.cardTemp.toBeMake,
          making:this.cardTemp.making,
          count:this.cardTemp.count
      }

    },
    //点击地图
    funcMap(res){
      this.backflag = 1
      // console.log(res.data)
      console.log('2')
      const params = {}
      this.getdataByGet('/apps/lasakaguan/screen/getCountyOrCityInfo?aac301a='+res.data.code,'getCountyOrCityInfo')
    },
    //点击银行
    getbank(index){
      //获取到下表
      //遍历银行列表,将下标值相同的isActive值赋值为1
      let temp = this.bankList;
      temp.forEach((v,i) => {
        i === index ? v.isActive = true : v.isActive = false
      })
      this.bankList = temp;
      
      //设置发放量和领取量
      let danweiIII = this.bankList[index].bankActiveCount > 1000 || this.bankList[index].bankActiveAndUnactiveCount > 1000 ? '单位/千张' :'单位/张'
      this.setBarLine('getbank',danweiIII,['发放量','制卡量'],[this.bankList[index].bankActiveCount,this.bankList[index].bankActiveAndUnactiveCount],this.bankColor[0],this.bankColor[1])
      //设置日激,周激活
      
      let danweiIIII = this.bankList[index].yesterdayCount >1000 || this.bankList[index].weekActivedCount>1000 ? '单位/千张' : '单位/张'
      this.setBarLine('sentbank',danweiIIII,['日激活','周激活'],[this.bankList[index].yesterdayCount,this.bankList[index].weekActivedCount],this.bankColor[2],this.bankColor[3])
    },
    reload() {
      this.cardFinished={     //社保卡成品卡数据
          actived:0,
          cancel:0,
          noActived:0,
          count:0
      },
      this.card={        //社保卡制卡中数据
          errPiece:0,
          notReviewed:0,
          toBeMake:0,
          making:0,
          count:0
      },
      this.servie={     //精准服务数据
        serviced:0,
        total:0,
        noserviced:0
        },
      this.number = {
        countCollect: 0, // 总采集
        countReceive: 0, // 总发放
        countActivate: 0, // 总领取
        makeCardPercent:'0 %', //总制卡占比
        activedPercent:'0 %'   //总激活占比
      },
      this.tabledata = [],
      this.mapData = []
      //总采集量、总制卡、总激活
      this.getData('/apps/lasakaguan/screen/getAllCounts','','midleData')
      //社保卡成品卡数据
      this.getData('/apps/lasakaguan/screen/getOutCardData','','bar1')
      //社保卡制卡中数据
      this.getData('/apps/lasakaguan/screen/getMakeCardData','','bar2')
      //各银行领取量
      // this.getData('/apps/lasakaguan/screen/getBankReceiveAndActiveCount','','barLine')
      this.getData('/apps/lasakaguan/screen/getBankReceiveAndActiveCount','','barLine')
      //精准服务人员数据
      this.getData('/apps/lasakaguan/screen/getAccurateServiceData','','table')
      // 地图
      this.getData('/apps/lasakaguan/screen/getActiveCardAndCollectionCardByAreaCodeData','', 'map')
      //社保卡持有率
      this.getData('/apps/lasakaguan/screen/getHoldingRate','','pie')
      // console.log('hhh');
      setTimeout(()=>{
        this.reload()
        console.log('刷新')
      },60*1000*60)
    },

    getPercent(num, count) {
      if(num == 0){
        return 0;
      }else{
        return (num / count) * 100 < 7 ? 7 : (num / count) * 100
      }
      
    },
    getdataByGet(url,type){
      this.$http.get(url).then((res)=>{
        if(res.data.statusCode === 0){
          //点击地图获取数据
              if(type == 'getCountyOrCityInfo'){
                  // console.log(res.data.result)
                  this.cardFinished={     //社保卡成品卡数据
                          actived:res.data.result.activation,
                          cancel:res.data.result.cancelled,
                          noActived:res.data.result.unactivation,
                          count:res.data.result.activation + res.data.result.cancelled + res.data.result.unactivation
                      }
                  this.card={        //社保卡制卡中数据
                      errPiece:res.data.result.exceptionCardCount,
                      notReviewed:res.data.result.notAuditCardCount,
                      toBeMake:res.data.result.waitMakeCardCount,
                      making:res.data.result.inMakingCardCount,
                      count:res.data.result.exceptionCardCount + res.data.result.notAuditCardCount + res.data.result.waitMakeCardCount + res.data.result.inMakingCardCount
                  }

                  //总采集、总制卡、总激活
                  this.number.countCollect = res.data.result.countCollect;
                  this.number.countReceive = res.data.result.countMakeCard;
                  this.number.countActivate = res.data.result.countActiveCard;
                  this.number.makeCardPercent = res.data.result.percentMakeCard;
                  this.number.activedPercent = res.data.result.percentActiveCard;

                  //地图数据
                  this.mapData = [];
                  let min = 0,
                    max = 0,
                    _lsCount = 0,
                    _lsSend = 0
                  for (let i in res.data.result.countyAndcityData) {
                    let item = res.data.result.countyAndcityData[i]
                    let _name = ''
                    if (item.name.indexOf('堆龙德庆') != -1) {
                      _name = '堆龙德庆县'
                    } else {
                      _name = item.name
                    }
                    if (
                      item.name == '柳梧新区' ||
                      item.name == '空港新区' ||
                      item.name == '市辖区' ||
                      item.name == '城关区'
                    ) {
                      _lsCount = parseInt(_lsCount) + parseInt(item.collcount)
                      _lsSend = parseInt(_lsSend) + parseInt(item.activeCount)
                    } else {
                      this.mapData.push({
                        name: _name,
                        value: item.collcount,
                        collcount: item.collcount,
                        sendcount: item.activeCount,
                        code: item.code
                      })
                    }
                  }
                  this.mapData.push({
                    name: '拉萨市区',
                    value: _lsCount,
                    collcount: _lsCount,
                    sendcount: _lsSend,
                    code:'540101'
                  })
                  for (const i in this.mapData) {
                    const item = this.mapData[i]
                    if (parseInt(item.collcount) < min) {
                      min = parseInt(item.collcount)
                    }
                    if (parseInt(item.collcount) > max) {
                      max = parseInt(item.collcount)
                    }
                  }
                  
                  console.log(this.mapData)
                  // this.setMap(this.mapData, min, max)

                }
          }
        })
      },
      getData(url,param,type){
        this.$http
        .post(url,param)
        .then(res => {
            
              if(res.data.statusCode === 0){
              
                if(type == 'midleData'){
                  //总采集、总制卡、总激活
                  this.number.countCollect = res.data.result.countCollect;  
                  this.number.countReceive = res.data.result.countMakeCard;
                  this.number.countActivate = res.data.result.countActiveCard;
                  this.number.makeCardPercent = res.data.result.percentMakeCard;
                  this.number.activedPercent = res.data.result.percentActiveCard;
                  // console.log(this.number.countCollect)
                  //缓存数据
                  this.midleData.countCollect = res.data.result.countCollect;
                  this.midleData.countReceive = res.data.result.countMakeCard;
                  this.midleData.countActivate = res.data.result.countActiveCard;
                  this.midleData.makeCardPercent = res.data.result.percentMakeCard;
                  this.midleData.activedPercent = res.data.result.percentActiveCard;
                }

                if(type == 'bar2'){
                this.card={        //社保卡制卡中数据
                    errPiece:res.data.result.exceptionCardCount,
                    notReviewed:res.data.result.notAuditCardCount,
                    toBeMake:res.data.result.waitMakeCardCount,
                    making:res.data.result.inMakingCardCount,
                    count:res.data.result.exceptionCardCount + res.data.result.notAuditCardCount + res.data.result.waitMakeCardCount + res.data.result.inMakingCardCount
                }
                //缓存数据
                this.cardTemp = {
                  errPiece:res.data.result.exceptionCardCount,
                  notReviewed:res.data.result.notAuditCardCount,
                  toBeMake:res.data.result.waitMakeCardCount,
                  making:res.data.result.inMakingCardCount,
                  count:res.data.result.exceptionCardCount + res.data.result.notAuditCardCount + res.data.result.waitMakeCardCount + res.data.result.inMakingCardCount
                }
                }

                //社保卡成品卡数据
                  if(type == 'bar1'){
                    this.cardFinished={     //社保卡成品卡数据
                          actived:res.data.result.activation,
                          cancel:res.data.result.cancelled,
                          noActived:res.data.result.unactivation,
                          count:res.data.result.activation + res.data.result.cancelled + res.data.result.unactivation
                      }
                    //缓存数据
                    this.cardFinishedTemp = {
                      actived:res.data.result.activation,
                      cancel:res.data.result.cancelled,
                      noActived:res.data.result.unactivation,
                      count:res.data.result.activation + res.data.result.cancelled + res.data.result.unactivation
                    }

                  }

                  //各银行领取量
                  if(type == 'barLine'){
                    
                    //获取tab切换键的数据
                    this.bankList = [];
                    let bankTemp = [];
                    res.data.result.bankActiveAndUnactive.forEach((v,i) => {
                      bankTemp.push({id:i,name:v.name,isActive:i == 0 ? true : false,code:v.code,weekActivedCount:v.weekActivedCount,bankActiveAndUnactiveCount:v.bankActiveAndUnactiveCount,bankActiveCount:v.bankActiveCount,yesterdayCount:v.yesterdayCount})
                    })
                    this.bankList = bankTemp
                    console.log(this.bankList)
                    //设置发放和领取量
                    //单位名称
                    // this.bankList[0].bankActiveCount = 10000000
                    // this.bankList[0].bankActiveAndUnactiveCount = 10000000
                    let danweiI = this.bankList[0].bankActiveAndUnactiveCount>1000 || this.bankList[0].bankActiveCount>1000 ? '单位/千张': '单位/张'
                    
                    //设置y轴数量
                    this.setBarLine('getbank',danweiI,['发放量','制卡量'],[this.bankList[0].bankActiveCount,this.bankList[0].bankActiveAndUnactiveCount],this.bankColor[0],this.bankColor[1])

                    //设置日激,周激活
                    // this.bankList[0].weekActivedCount = 100098
                    let danweiII = this.bankList[0].yesterdayCount>1000 || this.bankList[0].weekActivedCount>1000 ? '单位/千张' : '单位/张'
                    // let danweiII = '';
                    // if(this.bankList[0].yesterdayCount == 1000 || this.bankList[0].weekActivedCount == 1000){
                    //   danweiII = '单位/张'
                    // }
                    // if(this.bankList[0].yesterdayCount >=1000 || this.bankList[0].weekActivedCount >= 1000){
                     
                    //   danweiII = '单位/千张'
                    // }
                    // if(this.bankList[0].yesterdayCount < 1000 && this.bankList[0].weekActivedCount < 1000){
                    //   danweiII = '单位/张'
                    // }
                    
                    this.setBarLine('sentbank',danweiII,['日激活','周激活'],[this.bankList[0].yesterdayCount,this.bankList[0].weekActivedCount],this.bankColor[2],this.bankColor[3])
                    
                  }

                  //精准服务人员数据
                  if(type == 'table'){
                      this.servie={     //精准服务数据
                        total:res.data.result.service,
                        serviced:res.data.result.hasChangeCount,
                        noserviced:res.data.result.unService
                        }

                        if(res.data.result.specificInfo.length){
                            this.tabledata = res.data.result.specificInfo
                        }else{
                          this.tabledata = []
                        }
                  }

                  if(type == 'map'){
                  let min = 0,
                    max = 0,
                    _lsCount = 0,
                    _lsSend = 0
                  for (let i in res.data.result) {
                    let item = res.data.result[i]
                    let _name = ''
                    if (item.name.indexOf('堆龙德庆') != -1) {
                      _name = '堆龙德庆县'
                    } else {
                      _name = item.name
                    }
                    if (
                      item.name == '柳梧新区' ||
                      item.name == '空港新区' ||
                      item.name == '市辖区' ||
                      item.name == '城关区'
                    ) {
                      _lsCount = parseInt(_lsCount) + parseInt(item.collcount)
                      _lsSend = parseInt(_lsSend) + parseInt(item.activeCount)
                    } else {
                      this.mapData.push({
                        name: _name,
                        value: item.collcount,
                        collcount: item.collcount,
                        sendcount: item.activeCount,
                        code: item.code
                      })
                    }
                  }
                  this.mapData.push({
                    name: '拉萨市区',
                    value: _lsCount,
                    collcount: _lsCount,
                    sendcount: _lsSend,
                    code:'540101'
                  })
                  for (const i in this.mapData) {
                    const item = this.mapData[i]
                    if (parseInt(item.collcount) < min) {
                      min = parseInt(item.collcount)
                    }
                    if (parseInt(item.collcount) > max) {
                      max = parseInt(item.collcount)
                    }
                  }
                  
                  // console.log(this.mapData)
                  this.setMap(this.mapData, min, max)
                }

                if(type == 'pie'){
                  let pieColor = ['rgb(71,214,34)', 'rgb(254,172,2)', 'rgb(239,43,91)', 'rgb(1,202,254)'];
                  let pieData = [
                    {value:res.data.result.individualCount,name:'个体'},
                    {value:res.data.result.urbanAndRuralResidentsCount,name:'城乡居民'},
                    {value:res.data.result.enterpriseCount,name:'企业'},
                    {value:res.data.result.officeStaffCount,name:'机关'}
                  ]
                  this.setPie('piee',pieData,pieColor);
                }
              }else{
                this.$messagebox.alert('提示',res.data.message,'',['确定']);
              }
        }).catch(err => {
        
        })
      },
     
            setBarLine(el,danwei,xData,yData,beginColor,endColor){

              let myChart = echarts.init(document.getElementById(el))
              let option = {
                  grid: {
                      top: '20%',
                      right: '10%',
                      left: '25%',
                      bottom: '20%',
                      show:true,
                      borderColor:'#012f4a',
                      containLabel:false
                  },
                  tooltip:{
                    show:true,
                    // trigger: 'axis',
                    formatter:'{b}:{c}张'
                    // formatter: function(c) {
                    //   let str = ''
                    //   // console.log(c)
                    //   c.forEach((item) => {
                    //     let temp = {}
                    //     if(item.data > 1000){
                    //       temp.format = '千张';
                    //       temp.data = item.data/1000
                          
                    //     }else{
                    //       temp.format = '张';
                    //       temp.data = item.data
                         
                    //     }
                    //     temp.seriesName = item.name
                    //     str += temp.seriesName+': '+temp.data+temp.format+'<br />'
                    //   })
                    //   return str
                    // },
                  },
                  // color: 'rgba(151,232,51,1)',
                  xAxis: [{
                      type: 'category',
                      color: '#59588D',
                      data: xData,
                      // data:['发放量','激活量'],
                      axisLabel: {
                          // margin: 12,
                          //x轴标签旋转
                          // rotate:45,
                          color: 'rgba(255,255,255,.5)',
                          textStyle: {
                              fontSize: 12,
                              fontWeight:400
                          },
                      },
                      axisLine: {
                          lineStyle: {
                              color: 'rgba(107,107,107,0.37)',
                          }
                      },
                      axisTick: {
                          show: false
                      },
                  }],
                  yAxis: [{
                      // name:'单位/张',
                      name:danwei,
                      nameTextStyle:{
                        color:'rgba(255,255,255,.5)'
                      },
                      min:'1',
                      minInterval: 1,
                      axisLabel: {
                          color: '#999',
                          textStyle: {
                              fontSize: 12,
                              fontWeight:400
                          },
                          formatter: function(value,index){
                          var value;
                          //根据单位设置是否除于1000
                          if(danwei == '单位/千张'){
                            value = value/1000
                          }else{
                            value = value
                          }
                          return value
                          }
                      },
                      axisLine: {
                          lineStyle: {
                              color: '#012f4a',
                          },
                          
                      },
                      axisTick: {
                          show: false
                      },
                      splitLine: {
                          lineStyle: {
                              color: '#012f4a',
                            
                          }
                      }
                  }],
                  series: [{
                      name:'sent',
                      type: 'bar',
                      barGap:'10', 
                      barWidth: '10',
                      
                      itemStyle: {
                          normal: {
                              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                  offset: 0,
                                  // color: 'rgba(253,237,1,1)' // 0% 处的颜色
                                  color:beginColor,  // 0% 处的颜色
                              }, {
                                  offset: 1,
                                  color: endColor, // 100% 处的颜色
                              }], false),
                              barBorderRadius: [0, 0, 0, 0],
                          }
                      },
                      // data: [10,20],
                      data:yData
                  },
              ]
              };
              myChart.setOption(option)
              //让图像随着屏幕的变化自动适应
              window.addEventListener('resize',function () {
                myChart.resize();
              })
            },
    setMap(_data, _min, _max) {
      let that = this;
      echarts.registerMap('lasa', lasa)
      var geoCoordMap = {
        // 散点坐标
        拉萨市区: [91.13859, 29.65312],
        当雄县: [91.10076, 30.58309],
        林周县: [91.2586, 30.09445],
        尼木县: [90.06378, 29.63353],
        曲水县: [90.73187, 29.45636],
        堆龙德庆县: [90.70033, 29.85002],
        达孜县: [91.50757, 29.7722],
        墨竹工卡县: [91.92814, 29.93614]
      }
      var convertData = function(data) {
        // 处理数据函数
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              collcount: data[i].collcount,
              sendcount: data[i].sendcount
            })
          }
        }
        return res
      }
      var mapOption = {
        tooltip: {
          trigger: 'item',
          formatter: params => {
            // console.log(params)
            let coll = params.data ? params.data.collcount : ''
            let send = params.data ? params.data.sendcount : ''

            return (
              params.name +
              '<br>采集：' +
              coll +
              '人<br/>激活：' +
              send +
              '张'
            )
          },
          textStyle: {
            color: '#FDFEFD',
            fontSize: '14'
          }
        },
        visualMap: {
          show: true,
          min: 0,
          max: _max,
          left: '50',
          top: '20',
          itemWidth: 10,
          itemHeight: 100,
          seriesIndex: [1],
          text: ['高', '低'],
          realtime: false,
          // calculable: true,
          textStyle: {
            color: '#fff',
            fontSize: '15'
          },
          borderRadius: '50%',
          inRange: {
            color: ['#3580f5', '#2772E5', '#115CCF', '#105CCF']
          },
        },
        geo: {
          // 地图配置
          show: false,
          map: 'lasa',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#3580f5',
              borderColor: '#1c67da',
              borderWidth: 1
              //设置控制条的边角
            },
            emphasis: {
              areaColor: '#ffc300',
              borderColor: '#1c67da',
              borderWidth: 1
            }
          },
          data: _data,
          zoom: 1.15
        },
        series: [
          {
            // 散点配置
            name: '数量',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            
            symbolSize: 10,
            data: convertData(this.mapData),
            // symbolSize: function (val) {
            //     return val[2];
            // },
            showEffectOn: 'render',
            rippleEffect: {
                // brushType: 'stroke',
                period:0
            },
            hoverAnimation: true,
            label: {
                normal: {
                    // formatter: '{b}',
                    formatter: params => {
                      // console.log(params)
                      let coll = params.data ? params.data.collcount : ''
                      let send = params.data ? params.data.sendcount : ''

                      return (
                        '\n{a|' +
                        params.name +
                        '}\n{b|采集：' +
                        coll +
                        '人}\n{b|激活：' +
                        send +
                        '张}'
                      )
                    },
                    rich: {
                      a: {
                        align: 'left',
                        lineHeight: 25,
                        fontSize: 17
                      },
                      b: {
                        align: 'left',
                        color: 'rgb(254,144,2)',
                        lineHeight:16,
                        fontWeight: 700,
                        fontSize: 12
                      }
                    },
                    position: 'bottom',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#fff',
                    // shadowBlur: 10,
                    shadowColor: '#fff'
                }
            },
            zlevel: 1
          },
          {
            name: '',
            // type: 'effectScatter',
            type: 'map',
            mapType: 'lasa',
            coordinateSystem: 'map',
            roam: false,
            label:{
              normal: {
                show: false
              },
              emphasis:{
                show: false
              }
            },
            scaleLimit: {
              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
              min: 1.2, //最小的缩放值
              max: 1.2 //最大的缩放值
            },
            itemStyle: {
              normal: {
                areaColor: '#3580f5',
                borderColor: '#1c67da',
                borderWidth: 1
              },
              emphasis: {
                areaColor: '#ffc300',
                borderColor: '#1c67da',
                borderWidth: 1
              }
            },
            data: _data
          }
        ]
      }
      let myChart = echarts.init(document.getElementById('map'))
      myChart.off('click')
      myChart.on('click',function (params) {
        console.log('1')
        that.funcMap(params);
        
      })
      myChart.setOption(mapOption)
      window.addEventListener('resize',function () {
        myChart.resize();
      })
    },
    //
    setPie(el, _data, _color) {
      
      let option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          grid: {
              top:'10%',
              left: '20%',
              right: '0%',
              bottom: '0%',
          },
          series: [
              {
                  name: '面积模式',
                  type: 'pie',
                  radius: [30, 70],
                  center: ['50%', '55%'],
                  roseType: 'area',
                  label: {
              //饼图图形上的文本标签
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 14 //文字的字体大小
                      },
                      formatter: '{b|{b}}\n {d|{d}}{d|%}\n {e|{c}条}',
                      rich: {
                        b: {
                          color: '#fff',
                          lineHeight: 30,
                          fontSize: '15',
                          align: 'left',
                          height:30,
                        },
                        d: {
                          fontSize: 14,
                          align: 'left',
                          color:'#fff',
                          
                        },
                        e: {
                          fontSize: 14,
                          align: 'left',
                          lineHeight: 20,
                          
                        }
                      }
                    }
                },
            // labelLine:{
            //     //连接图表的线的长短
            //     length:15,
            //     //连接标签线的长短
            //     length2:20
            //     },
                color:_color,
                data: _data
              }
          ]
      };
      let chart = echarts.init(document.getElementById(el))
      chart.setOption(option)

      window.addEventListener('resize',function () {
        chart.resize();
      })
     
    },
    setbar(el, _data) {
      //设置实例化对象
      let myChart = echarts.init(document.getElementById(el));
      let option = {
          grid: {
              left: '5%',
              right: '5%',
              bottom: '0',
              top: '10%',
              containLabel: true
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'none'
              },
              formatter: function(params) {
                  return params[0].name + '<br/>' +
                      "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                      params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' 万元<br/>'
              }
          },
          // backgroundColor: 'rgb(20,28,52)',
          xAxis: {
              show: false,
              type: 'value',
              boundaryGap:true
          },
          yAxis: [{
              type: 'category',
              inverse: true,
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: '#fff'
                  },
              },
              splitLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              axisLine: {
                  show: false
              },
              data: ['已激活', '已注销', '未激活']
          }, {
              type: 'category',
              inverse: true,
              axisTick: 'none',
              axisLine: 'none',
              show: true,
              axisLabel: {
                  textStyle: {
                      color: '#ffffff',
                      fontSize: '10'
                  },
                  formatter: function(value) {
                      if (value >= 10000) {
                          return (value / 10000).toLocaleString() + '万';
                      } else {
                          return value.toLocaleString();
                      }
                  },
              },
              data: [2000, 2000, 27000]
          }],
          series: [{
                  barGap:100,
                  name: '类型',
                  type: 'bar',
                  zlevel: 1,
                  itemStyle: {
                      normal: {
                        color:function (params) {
                          var colorList = [
                            ['rgb(151,232,50)','rgb(24,175,35)'],
                            ['rgb(253,137,13,1)','rgb(250,34,224,1)'],
                            ['rgb(254,182,84,1)','rgb(221,115,2,1)'],
                          ];
                          var index = params.dataIndex;
                        // if (params.dataIndex >= colorList.length) {
                        //     index = params.dataIndex - colorList.length;
                        // }
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                            [{
                                    offset: 0,
                                    color: colorList[index][0]
                                },
                                {
                                    offset: 1,
                                    color: colorList[index][1]
                                }
                            ]);


                        },
                          barBorderRadius: 30,
                      },
                  },
                  barWidth: 10,
                  data: [1000, 5000, 1000]
              },
              {
                  name: '背景',
                  type: 'bar',
                  barWidth: 10,
                  barGap: '-100%',
                  data: [5000, 5000, 5000],
                  itemStyle: {
                      normal: {
                          color: 'rgba(24,31,68,1)',
                          barBorderRadius: 30,
                      }
                  },
              },
          ]
      };
      
      myChart.setOption(option)
    },
    setLine(el, _data, _color) {
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '18%'
        },
        xAxis: [
          {
            data: (function() {
              const list = _data.map(i => {
                return i.name
              })
              return list
            })(),
            axisPointer: false,
            // axisLine: {
            //   lineStyle: {
            //     color: '#4998DF',
            //     width: 2
            //   }
            // },
            axisLine: {
              textStyle: {
                fontSize: 12
              },
              lineStyle: {
                width: 0,
                color: '#4998DF' // y轴的轴线的宽度和颜色
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 35,
              textStyle: {
                color: '#A9C7E4', // 这里是改变字体颜色
                fontSize: 12
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：万张',
            splitLine: {
              lineStyle: {
                color: '#153062' // y轴的轴线的宽度和颜色
              }
            },
            axisTick: {
              show: false
            },
            axisPointer: false,
            axisLine: {
              textStyle: {
                fontSize: 12
              },
              lineStyle: {
                width: 0,
                color: '#A9C7E4' // y轴的轴线的宽度和颜色
              }
            }
          }
        ],
        series: [
          {
            // name: target[i],
            type: 'line',
            // symbol: 'none',
            symbol: 'circle',
            showAllSymbol: true, // 显示所有点
            symbolSize: 7,
            smooth: true,
            itemStyle: {
              color: _color,
              borderWidth: 2,
              borderColor: _color
            },
            areaStyle: {
              normal: {
                type: 'default',
                // color: '#3572BE'
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: _color // 0% 处的颜色
                  },
                  {
                    offset: 0.9,
                    color: 'rgba(255,255,255,0)' // 100% 处的颜色
                  }
                ]) // 背景渐变色
              }
            },
            data: (function() {
              const list = _data.map(i => {
                return i.value
              })
              return list
            })()
          }
        ]
      }

      const chart = echarts.init(document.getElementById(el))
      chart.setOption(option)
    },
    //表格滚动
    scrollTable(){
           var tmp = this.tabledata.shift();//删掉第一行数据并返回
           this.tabledata.push(tmp);         //将第一行数据存到末尾
      }
  }
}
</script>
<style lang="scss" scoped>

.active {
  background-color: #04c7fd;
}
i {
  display: inline-block;
  width: 0.1875rem;
  height: 0.1875rem;
  font-style: normal;
  border-radius: 0.025rem;
  border: 1px solid rgba(4,198,251,1);
}
.warnColor{
  color:red;
  font-weight: 400;
}
.serverColor{
  color:rgb(26,177,38);
  font-weight: 400;
}
li{
  list-style: none;
}
.dashboard {

  width: 19.2rem;
  height: 10.8rem;
  background: url('../assets/img/bg.jpg') no-repeat;
  background-size: 100% 100%;
  padding: 1.1rem .1875rem .0625rem .1875rem;
  text-align: left;
  display: flex;
  justify-content: space-between;
  .chartBox {
    // position: relative;
    width: 4.8125rem;
    height: 3.2rem;
    background: url('../assets/img/leftBg.png') no-repeat top center;
    background-size: 100% 100%;
    padding: .125rem .125rem .0625rem .125rem;
    margin-bottom: .0625rem;
    // border: 0.01rem solid red;
    .chartTitle {
      background: url('../assets/img/tag.png') no-repeat left center;
      background-size: .1625rem 0.25rem;
      color: white;
      font-weight: bold;
      font-size: 0.25rem;
      padding-left: 0.3rem;
      letter-spacing: 0.03rem;
    }

    ul {
      display: flex;
      height: 120px;
      position: relative;
      &::after{
        position: absolute;
        bottom: 0;
        left: 10%;
        content: '';
        width: 70%;
        height: 2px;
        border-bottom: 1px solid #56A7FB;
        border-image: -webkit-linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
        border-image: -moz-linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
        border-image: linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
        
      }
      li{
        flex:1;
        position: relative;
        padding-top: 10px;
        height: 80px;
        font-size: 35px;
        color:white;
        font-weight: 700;
        text-align: center;
        
        &:first-child::after {
            position: absolute;
            top: 40%;
            right: 0;
            width: 1px;
            height: 80%;
            content: '';
            border-right:1px solid #56A7FB;
            border-image: -webkit-linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
            border-image: -moz-linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
            border-image: linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
          }
          &:last-child::after {
            position: absolute;
            top: 40%;
            left: 0;
            width: 1px;
            height: 80%;
            content: '';
            border-left:1px solid #56A7FB;
            border-image: -webkit-linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
            border-image: -moz-linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
            border-image: linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
          }
      }
     
    }
  }
  .chartBox1 {
    width: 4.8125rem;
    // width: 4.525rem;
    height: 4.8rem;
    background: url('../assets/img/leftBg.png') no-repeat top center;
    background-size: 100% 100%;
    padding: .125rem .125rem .0625rem .125rem;
    margin-bottom: .0625rem;
    // border: 0.01rem solid red;

    .chartItem{
      width: 100%;
      height: 85%;
    }
    .chartItembank {
      display: flex;
      width: 100%;
      height: 75%;
      margin-top: 10%;
      // background: pink;

      .getbank {
        flex: 1;
        margin-left: 0.1875rem;
        width: 50%;
        height: 100%;
      }
      .sentbank{
        flex: 1;
        width: 50%;
        height: 100%;
      }
    }
    .chartTitle {
      background: url('../assets/img/tag.png') no-repeat left center;
      background-size: .1625rem 0.25rem;
      color: white;
      font-weight: bold;
      font-size: 0.25rem;
      padding-left: 0.3rem;
      letter-spacing: 0.03rem;
    }

    .header{
      width: 100%;
      text-align: center;
      padding: 0.125rem 0.0625rem;
      ul {
        width: 100%;
        padding: 0 0.4375rem;
         li {
           float: left;
           width: 0.6875rem;
           height: 0.25rem;
           line-height: 0.25rem;
           margin-left: 0.1875rem;
           margin-bottom: 0.0625rem;
           color: #a3b7d2;
           font-size: 0.175rem;
           i{
             margin-right: 0.0625rem;
           }
        }
        li:hover{
          cursor: pointer;
        }
      }
    }
  }

}
.progressBox {
  padding: 0.2rem;
}
.progress_txt {
  display: flex;
}
.progressItem {
  margin-bottom: 0.2rem;
  color: #a9c7e4;
  .progressTitle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.1rem;
    color: #a9c7e4;
    font-size: 0.16rem;
  }
  .progress {
    flex: 1;
    margin-right: .1rem;
    // width: 100%;
    height: 0.13rem;
    background: #122354;
    // background: linear-gradient(135deg, transparent 0.1rem, #122354 0);
    position: relative;
    overflow: hidden;
    &::after {
      content: '';
      width: 0.2rem;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      background: linear-gradient(-225deg, transparent 0.13rem, #0f1330 0);
    }
    .progress_in3 {
      width: 0%;
      transition: all 1s ease 0.5s;
      height: 100%;
      // background:#1674fc;
      position: relative;
      background: linear-gradient(135deg, transparent 0.1rem, rgb(146,230,48) 0%,rgb(24,174,35) 100%);
     
      &::after {
        content: '';
        width: 0.2rem;
        height: 100%; 
        position: absolute;
        right: 0;
        top: 0;
        background: linear-gradient(-225deg, transparent 0.13rem, #122354 0);
      }
    }
    .progress_in2 {
      width: 0%;
      transition: all 1s ease 0.5s;
      height: 100%;
      // background:#1674fc;
      position: relative;
      background: linear-gradient(135deg, transparent 0.1rem, rgb(255,139,10) 0%,rgb(249,34,228) 100%);
     
      &::after {
        content: '';
        width: 0.2rem;
        height: 100%; 
        position: absolute;
        right: 0;
        top: 0;
        background: linear-gradient(-225deg, transparent 0.13rem, #122354 0);
      }
    }
    .progress_in1 {
      width: 0%;
      transition: all 1s ease 0.5s;
      height: 100%;
      // background:#1674fc;
      position: relative;
      background: linear-gradient(135deg, transparent 0.1rem, rgb(254,182,84) 0%,rgb(221,114,1) 100%);
     
      &::after {
        content: '';
        width: 0.2rem;
        height: 100%; 
        position: absolute;
        right: 0;
        top: 0;
        background: linear-gradient(-225deg, transparent 0.13rem, #122354 0);
      }
    }

    .progress_in4 {
      width: 0%;
      transition: all 1s ease 0.5s;
      height: 100%;
      // background:#1674fc;
      position: relative;
      background: linear-gradient(135deg, transparent 0.1rem, rgb(1,129,254) 0%,rgb(1,225,254) 100%);
     
      &::after {
        content: '';
        width: 0.2rem;
        height: 100%; 
        position: absolute;
        right: 0;
        top: 0;
        background: linear-gradient(-225deg, transparent 0.13rem, #122354 0);
      }
    }
  }
}

.middle {
  flex: 1;
  padding: 0;
}
.top {
  width: 100%;
  display: flex;
  justify-content: center;
  .box {
    width: 2.52rem;
    height: 1.53rem;
    font-size: 0.23rem;
    margin: 0 0.15rem;
    color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 0.4rem;
    font-weight: bold;
    span {
      font-size: 0.45rem;
    }
    .boxtt {
      margin-bottom: 0.1rem;
      font-weight: 400;
      
    }
    .boxtt_footer{
        font-size: .15rem;
        font-weight: 400;
      }
  }
  .box1 {
    background: url('../assets/img/block1.png') no-repeat;
    background-size: 100% 100%;
  }
  
  .bigbox{

    .show{
      display: block;
    }
    .hide{
      display: none;
      // 添加过渡效果
      transition: all 0.5s;
    }
  }

  //当鼠标经过
  .bigbox:hover .show {
    display: none;
  }
  .bigbox:hover .hide {
    display: block;
    font-size: 0.15rem;
    span {
      font-size: 0.2rem;
    }
    
  }

  // 总制卡量

  .bigbox1{

    .show1{
      display: block;
    }
    .hide1{
      display: none;
      // 添加过渡效果
      transition: all 0.5s;
    }
  }

  //当鼠标经过
  .bigbox1:hover .show1 {
    display: none;
  }
  .bigbox1:hover .hide1 {
    display: block;
    font-size: 0.15rem;
    span {
      font-size: 0.2rem;
    }
    
  }

  // 总制卡量

  .bigbox2{
    .show2{
      display: block;
    }
    .hide2{
      display: none;
      // 添加过渡效果
      transition: all 0.5s;
    }
  }

  //当鼠标经过
  .bigbox2:hover .show2 {
    display: none;
  }
  .bigbox2:hover .hide2 {
    display: block;
    font-size: 0.15rem;
    span {
      font-size: 0.2rem;
    }
    
  }

  .box2 {
    background: url('../assets/img/block2.png') no-repeat;
    background-size: 100% 100%;
  }
  .box3 {
    background: url('../assets/img/block3.png') no-repeat;
    background-size: 100% 100%;
  }
}
.bottom {
  position: relative;
  height: 8rem;
}
.back {
  position: absolute;
  top: 0.625rem;
  right: 0.25rem;
  width: 1rem;
  height: 0.375rem;
  line-height: 0.375rem;
  text-align: center;
  font-size: 0.2rem;
  color:#fff;
  font-weight: 700;
  z-index: 400;
  
}
.back:hover {
    cursor: pointer;
  }
#map {
  padding-top: 0.6rem;
}
</style>
